<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.min.js"></script> -->
</head>
<style>
    #root {
        padding: 20px;
        width: 100%;
        height: 700;
        background-color: rgb(0, 117, 190);
    }

    .subcom {
        width: 90%;
        padding: 20px;
        margin-top: 20px;
        height: 100px;
        background-color: rgb(240, 244, 4);
    }
</style>
<!-- 张如鑫209150217 -->
<body>
    <div id="root">
        <c1 class="subcom"></c1>
        <c2 class="subcom"></c2>
        <c3 class="subcom"></c3>
    </div>
    <script>
        const emitter = window.mitt();
        const app = Vue.createApp({
            components: {
                'c1': {
                    data(){
                        return{
                            event3_data:""
                        }
                    },
                    methods: {
                        toSon() {
                            emitter.emit("event1", "去喊你妹妹回家吃饭啦");
                        }
                    },
                    mounted(){
                        emitter.on("event3",e => {
                            this.event3_data = e;
                        });
                    },
                    template: `
                        <div>
                            <h1>爸爸听到女儿说：{{event3_data}}</h1>
                            爸爸说<button @click="toSon">发送</button>
                        </div>
                    `
                },
                'c2':{
                    data(){
                        return{
                            event1_data:""
                        }
                    },
                    methods: {
                        toSister() {
                            emitter.emit("event2", "妹妹，爸爸喊我们回家吃饭啦");
                        }
                    },
                    mounted(){
                        emitter.on("event1",e => {
                            this.event1_data = e;
                        });
                    },
                    template:`
                        <div>
                            <h1>儿子听到爸爸说：{{event1_data}}</h1>
                            哥哥说<button @click="toSister">发送</button>
                        </div>
                    `
                },
                'c3':{
                    data(){
                        return{
                            event2_data:""
                        }
                    },
                    methods: {
                        toDad() {
                            emitter.emit("event3", "知道啦，现在就回去");
                        }
                    },
                    mounted(){
                        emitter.on("event2",e => {
                            this.event2_data = e;
                        });
                    },
                    template:`
                        <div>
                            <h1>妹妹听到哥哥说：{{event2_data}}</h1>
                            妹妹说<button @click="toDad">发送</button>
                        </div>
                    `
                }
            }
        });

        const vm = app.mount("#root");
    </script>
</body>

</html>